<template>
  <div class="elm-edit f_edit">
    <elm-page-bb class="ei_edit" v-loading="loading">
      <el-row></el-row>
      <div>
        <span style="font-weight: bold;">当满足以下条件时，连线流向</span>
        <el-select v-model="end_node" size="small" style="width:120px;margin-left:5px;" :disabled="!allow_change_to_node">
          <el-option
              v-for="item in node_for_select_list"
              :key="item.id"
              :label="item.title"
              :value="item.id">
          </el-option>
        </el-select>
      </div>
      <el-row style="height: 10px;"></el-row>
      <div class="div_box">
        <div class="div_box_left">
          <div class="div_box_left_card">
            <div v-if="false" class="div_box_left_text">{{condition_s}}</div>
            <div v-if="false" class="div_box_left_text">{{condition_s_str}}</div>
            <div v-for="item in condition_s_str_list" class="div_box_left_text">{{item}}</div>
          </div>
        </div>
        <div class="div_box_right">
          <el-button style="background-image: linear-gradient(135deg, #C5621F, #FE943E);color: #ffffff;" type="warning"
                     class="div_box_right_button" @click="clearCondition" >清空</el-button>
          <el-popover placement="bottom" title="" width="180" trigger="manual" v-model="tempVisible">
            <el-button style="background-image: linear-gradient(135deg, #1B89F8, #4DA6F9);color: #ffffff;"
                       slot="reference" class="div_box_right_button" @click="tempVisible=true;" >输入值</el-button>
            <el-row style="text-align: center;">
              <el-input v-model="tempText" style="width: 100%;" size="mini"></el-input>
            </el-row>
            <el-row style="text-align: right;margin-top: 10px;">
              <el-button type="primary" plain size="small" @click="addTempText()">
                确定</el-button>
              <el-button plain size="small" @click="closeTemp">
                取消</el-button>
            </el-row>
          </el-popover>
          <el-button style="background-image: linear-gradient(135deg, #1B89F8, #4DA6F9);color: #ffffff;"
                     class="div_box_right_button" @click="addText('(')" >(</el-button>
          <el-button style="background-image: linear-gradient(135deg, #1B89F8, #4DA6F9);color: #ffffff;"
                     class="div_box_right_button" @click="addText(')')" >)</el-button>

          <el-button class="div_box_right_button" @click="addText('==')" >
            <div class="div_b_text_01">＝</div><div class="div_b_text_02">等于</div>
          </el-button>
          <el-button class="div_box_right_button" @click="addText('>')" >
            <div class="div_b_text_01">></div><div class="div_b_text_02">大于</div>
          </el-button>
          <el-button class="div_box_right_button" @click="addText('＋')" >
            <div class="div_b_text_01">＋</div><div class="div_b_text_02">加</div>
          </el-button>
          <el-button class="div_box_right_button cc_text_mini" @click="addText('包含')" >包含</el-button>

          <el-button class="div_box_right_button" @click="addText('!=')" >
            <div class="div_b_text_01">≠</div><div class="div_b_text_02">不等于</div>
          </el-button>
          <el-button class="div_box_right_button" @click="addText('>=')" >
            <div class="div_b_text_01">≥</div><div class="div_b_text_02">大于等于</div>
          </el-button>
          <el-button class="div_box_right_button" @click="addText('－')" >
            <div class="div_b_text_01">－</div><div class="div_b_text_02">减</div>
          </el-button>
          <el-button class="div_box_right_button cc_text_mini" @click="addText('不包含')" >不包含</el-button>

          <el-button class="div_box_right_button" @click="addText('&&')" >且</el-button>
          <el-button class="div_box_right_button" @click="addText('<')" >
            <div class="div_b_text_01"><</div><div class="div_b_text_02">小于</div>
          </el-button>
          <el-button class="div_box_right_button" @click="addText('×')" >
            <div class="div_b_text_01">×</div><div class="div_b_text_02">乘</div>
          </el-button>
          <el-button class="div_box_right_button cc_text_mini" @click="addText('flowins_creater')" >发起人</el-button>

          <el-button class="div_box_right_button" @click="addText('||')" >或</el-button>
          <el-button class="div_box_right_button" @click="addText('<=')" >
            <div class="div_b_text_01">≤</div><div class="div_b_text_02">小于等于</div>
          </el-button>
          <el-button class="div_box_right_button" @click="addText('÷')" >
            <div class="div_b_text_01">÷</div><div class="div_b_text_02">除</div>
          </el-button>
          <el-button class="div_box_right_button cc_text_mini" @click="addText('flowins_create_time')" >发起日期</el-button>
          <el-button  v-for="ff_item in ff_item_list" type="primary" plain
                      class="div_box_right_button" @click="addText(ff_item.column_name)" >{{ff_item.title}}</el-button>
        </div>
      </div>

      <template #bottom>
        <el-button type="success" size="small" @click="submit">确定</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </template>
    </elm-page-bb>
  </div>
</template>

<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      loading:true,

      DE_INFO: null,

      line_id:'',
      from_node_title:'',
      to_node_title:'',
      end_node:'',
      condition_s:'',
      condition_s_str:'',
      condition_s_str_list:[],
      allow_change_to_node:false,
      node_for_select_list:[],

      tempVisible:false,
      tempText:'',

      ff_item_list:[],
      someData:{'&&':'且','||':'或','==':'等于','!=':'不等于','>':'大于','>=':'大于等于','<':'小于','<=':'小于等于',},
    }
  },
  mounted() {
    this.DE_INFO = elm.dialog.request;
    this.line_id = this.DE_INFO.line_id;
    this.from_node_title = this.DE_INFO.from_node_title;
    this.to_node_title = this.DE_INFO.to_node_title;
    this.end_node = this.DE_INFO.end_node;
    this.allow_change_to_node = this.DE_INFO.allow_change_to_node;
    this.node_for_select_list = this.DE_INFO.node_for_select_list;

    this.v_getData();
  },
  methods: {
    async v_getData(){
      this.loading = true;

      this.ff_item_list = this.DE_INFO.ff_item_list;

      this.condition_s = this.em(this.DE_INFO.condition_s)?'':this.DE_INFO.condition_s;
      this.turnLineCondition_S_Str();

      this.loading = false;
    },
    turnLineCondition_S_Str(){
      if(this.em(this.condition_s)){
        this.condition_s_str = '';
        this.condition_s_str_list = [];
        return;
      }

      let condition_s_str = '';
      let condition_s_str_list = [condition_s_str];
      let index = 0;
      let cList = this.condition_s.split('####');
      for(let i=0;i<cList.length;i++){
        let str = cList[i];
        str=str.replace(/^\s+|\s+$/g,"");//去除首尾空格
        str=str.replace(/[\r\n]/g, "");//去除换行符

        let cc_str = cList[i];
        if(!this.em(str)){
          if(str.indexOf('"')==0){cc_str = str;}
          else if(this.someData[str]!=null){cc_str = this.someData[str];}
          else if(str=='flowins_creater'){cc_str = '发起人';}
          else if(str=='flowins_create_time'){cc_str = '发起日期';}
          else{
            let is_ff_item = false;
            let ff_item_title = '';

            for(let kk=0;kk<this.ff_item_list.length;kk++){
              if(str == this.ff_item_list[kk].column_name){
                ff_item_title = this.ff_item_list[kk].title;
                is_ff_item = true;
                kk = this.ff_item_list.length+1;
              }
            }

            if(is_ff_item){cc_str = ff_item_title}
            else{cc_str = str;}
          }
        }

        if(cc_str=='且' || cc_str=='或'){
          condition_s_str_list.push(cc_str);
          condition_s_str_list.push('');
          index = index+2;
        }
        else{
          condition_s_str_list[index] = condition_s_str_list[index] + ' ' + cc_str;
        }
      }

      this.condition_s_str_list = condition_s_str_list;
    },
    clearCondition: function (str) {
      this.condition_s = '';
      this.turnLineCondition_S_Str();
    },
    addText: function (str) {
      this.condition_s = this.condition_s + '####' + str;
      this.turnLineCondition_S_Str();
    },
    addTempText: function () {
      this.tempText=this.tempText.replace(/^\s+|\s+$/g,"");//去除首尾空格
      this.tempText=this.tempText.replace(/[\r\n]/g, "");//去除换行符
      if(this.em(this.tempText)){this.closeTemp();return;}
      if(this.tempText.indexOf('"')>=0 || this.tempText.indexOf("'")>=0){this.closeTemp();return;}//文本中不能含有双引号或单引号
      if(this.tempText.indexOf('####')>=0){this.closeTemp();return;}//文本中不能含有 '####'

      let str = this.tempText;
      if ( isNaN( parseInt(str) ) ) { str = '"' + str + '"'; }

      this.condition_s = this.condition_s + '####' + str;
      this.turnLineCondition_S_Str();
      this.closeTemp();
    },
    closeTemp: function () { this.tempText = ''; this.tempVisible=false; },

    submit:function (){
      this.condition_s=this.condition_s.replace(/^\s+|\s+$/g,"");//去除首尾空格
      this.condition_s=this.condition_s.replace(/[\r\n]/g, "");//去除换行符
      this.turnLineCondition_S_Str();
      let lineItem = {
        'id':this.line_id,
        'condition_s':this.condition_s,
        'condition_s_str':this.condition_s_str,
        'end_node':this.end_node,
      };
      this.DE_INFO.callVue.refreshNodeLine({'refresh_line_list':[lineItem]});
      this.v_cancle();
    },
    v_cancle(){
      this.close();//extends: elmVueBase
    },


    em(s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },

  }
}
</script>
<style>
.f_edit .elm-body{ padding: 5px; }

.div_box{
  display: flex;
  flex-direction:row;
  justify-content: center;
  align-items:center;

  width: 740px;
  height: 380px;
  border-radius: 4px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}
.div_box_left{
  flex: 0 0 auto;

  width: 200px;
  height: 340px;
  background-color: #DADDE5;
  border-radius: 4px;
}
.div_box_left_card{
  width: 160px;
  height: 300px;
  margin-left: 20px;
  margin-top: 20px;
  background-image: linear-gradient(135deg, #ECEFF7, #FFFFFF);
  border-radius: 4px;

  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
}
.div_box_left_text{
  font-size: 16px;
  font-weight: bold;
  margin-bottom:10px;
}
.div_box_right{
  flex: 0 0 auto;

  margin-left: 14px;
  width: 480px;
  height: 340px;

  padding-left: 20px;
  background-color: #DADDE5;
  border-radius: 4px;

  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: flex-start;
  align-items:flex-start;
}
.div_box_right_button{
  flex: 0 0 auto;

  margin-top: 20px;
  width: 60px;
  height: 60px;
  border-radius: 11px;
  background-image: linear-gradient(135deg, #E1E6F3, #FFFFFF);
  box-shadow: 2px 2px 3px rgba(0,0,0,0.2);

  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
}
.div_b_text_01{
  flex: 0 0 auto;
  font-size: 22px;
}
.div_b_text_02{
  flex: 0 0 auto;
  font-size: 8px;
}
.div_box_right .el-button{
  margin-left: 0;
}
.cc_text_mini{
   font-size: 8px;
 }
</style>